gs-loader {
    position: absolute;
    
    left: 0;
    top: 0;
    
    width: 100%;
    height: 100%;
    
    background-color: #AAAAAA;
    background-color: rgba(20, 20, 20, 0.1);
    
    z-index: 101;
}

gs-loader .loader-positioning {
    position: relative;
    
    max-width: 14em;
    min-height: 3em;
    width: 90%;
    
    color: #FFFFFF;
    
    text-align: center;
    
    margin: 2em auto 0 auto; /* 5em */
    padding: 0.2em;
    padding-top: 3.25em;
    
    background-color: #9D9D9D;
    opacity: 0.7;
    
    border-radius: 0.25em;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

gs-loader .loader-positioning .loader-content {
    padding-top: 0.2em;
}

/*
gs-loader .loader-positioning .loader-spinner {
    margin: 0 auto;
    
    width: 2.75em;
    height: 2.75em;
    
    opacity: 0.7;
    
    background: url(/images/ajax-loader.gif);
    background-size: 2.75em 2.75em;
    
    border: 2px solid #DDDDDD;
    border-radius: 50%;
}*/



@-webkit-keyframes spin-forwards {
    from {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    to {
        transform: rotate(450deg);
        -ms-transform: rotate(450deg);
        -webkit-transform: rotate(450deg);
    }
}

@keyframes spin-forwards {
    from {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    to {
        transform: rotate(450deg);
        -ms-transform: rotate(450deg);
        -webkit-transform: rotate(450deg);
    }
}

@-webkit-keyframes spin-backwards {
    from {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

@keyframes spin-backwards {
    from {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

.loader-positioning .spinning {
    position: absolute;
    left: 50%;
    z-index: 20;
    padding: 0; 
    border: 0.25em solid #EAEAEA;
    border-left: 0.25em double #EAEAEA;
    border-radius: 50%;
    background-color: #999999;
}

.loader-positioning .loader {
    position: absolute;
    left: 50%;
    z-index: 20;
    padding: 0;
    
    border-radius: 50%;
    background-color: #838383;
    
    width: 3em;
    height: 3em;
    margin-left: -1.5em;
    top: 0.25em;
}

.loader-positioning .loader-inner {
    width: 2em;
    height: 2em;
    margin-left: -1.25em;
    top: 0.5em;
    /*border-color: #006E00;*/
    -webkit-animation: spin-backwards 2000ms linear infinite;
    -moz-animation: spin-backwards 2000ms linear infinite;
    animation: spin-backwards 2000ms linear infinite;
}

.loader-positioning .loader-inner-inner {
    width: 1em;
    height: 1em;
    margin-left: -0.75em;
    top: 1em;
    /*border-color: #000066;*/
    -webkit-animation: spin-forwards 1150ms linear infinite;
    -moz-animation: spin-forwards 1150ms linear infinite;
    animation: spin-forwards 1150ms linear infinite;
}

.loader-positioning .loader-inner-inner-inner {
    width: 0;
    height: 0;
    margin-left: -0.25em;
    top: 1.5em;
    /*border-color: #660000;*/
    -webkit-animation: spin-forwards 1810ms linear infinite;
    -moz-animation: spin-forwards 1810ms linear infinite;
    animation: spin-forwards 1810ms linear infinite;
}
